<script>
  import { Checkbox } from "@ark-ui/svelte";
  import { CheckIcon, CreditCardIcon, SmartphoneIcon } from "lucide-svelte";
</script>

<div class="space-y-6">
  <div>
    <h3 class="text-base font-semibold text-gray-900 dark:text-gray-100 mb-4">
      Select your plan
    </h3>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
      <Checkbox.Root class="cursor-pointer group h-full">
        <div
          class="border-2 border-gray-300 dark:border-gray-600 rounded-lg p-4 bg-white dark:bg-gray-900 shadow-xs group-data-[state=checked]:border-blue-500 group-data-[state=checked]:bg-blue-50 group-data-[state=checked]:shadow-md dark:group-data-[state=checked]:bg-blue-950 transition-all duration-200 hover:border-gray-400 hover:shadow-md dark:hover:border-gray-400 h-full flex flex-col"
        >
          <div class="flex items-start justify-between flex-1">
            <div class="flex-1 flex flex-col">
              <Checkbox.Label
                class="block text-sm font-medium text-gray-900 dark:text-gray-100 cursor-pointer"
              >
                Basic Plan
              </Checkbox.Label>
              <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                Perfect for individuals
              </p>
              <p
                class="text-lg font-bold text-gray-900 dark:text-gray-100 mt-auto pt-2"
              >
                $9/month
              </p>
            </div>
            <Checkbox.Control
              class="w-5 h-5 bg-white border-2 border-gray-300 rounded data-[state=checked]:bg-blue-500 data-[state=checked]:border-blue-500 dark:bg-gray-800 dark:border-gray-500 dark:data-[state=checked]:bg-blue-500 dark:data-[state=checked]:border-blue-500 transition-all duration-200 flex items-center justify-center"
            >
              <Checkbox.Indicator>
                <CheckIcon class="w-3.5 h-3.5 text-white" />
              </Checkbox.Indicator>
            </Checkbox.Control>
          </div>
        </div>
        <Checkbox.HiddenInput />
      </Checkbox.Root>

      <Checkbox.Root class="cursor-pointer group h-full">
        <div
          class="border-2 border-gray-300 dark:border-gray-600 rounded-lg p-4 bg-white dark:bg-gray-900 shadow-xs group-data-[state=checked]:border-blue-500 group-data-[state=checked]:bg-blue-50 group-data-[state=checked]:shadow-md dark:group-data-[state=checked]:bg-blue-950 transition-all duration-200 hover:border-gray-400 hover:shadow-md dark:hover:border-gray-400 h-full flex flex-col"
        >
          <div class="flex items-start justify-between flex-1">
            <div class="flex-1 flex flex-col">
              <Checkbox.Label
                class="block text-sm font-medium text-gray-900 dark:text-gray-100 cursor-pointer"
              >
                Pro Plan
              </Checkbox.Label>
              <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                Best for teams
              </p>
              <p
                class="text-lg font-bold text-gray-900 dark:text-gray-100 mt-auto pt-2"
              >
                $29/month
              </p>
            </div>
            <Checkbox.Control
              class="w-5 h-5 bg-white border-2 border-gray-300 rounded data-[state=checked]:bg-blue-500 data-[state=checked]:border-blue-500 dark:bg-gray-800 dark:border-gray-500 dark:data-[state=checked]:bg-blue-500 dark:data-[state=checked]:border-blue-500 transition-all duration-200 flex items-center justify-center"
            >
              <Checkbox.Indicator>
                <CheckIcon class="w-3.5 h-3.5 text-white" />
              </Checkbox.Indicator>
            </Checkbox.Control>
          </div>
        </div>
        <Checkbox.HiddenInput />
      </Checkbox.Root>

      <Checkbox.Root class="cursor-pointer group h-full">
        <div
          class="border-2 border-gray-300 dark:border-gray-600 rounded-lg p-4 bg-white dark:bg-gray-900 shadow-xs group-data-[state=checked]:border-blue-500 group-data-[state=checked]:bg-blue-50 group-data-[state=checked]:shadow-md dark:group-data-[state=checked]:bg-blue-950 transition-all duration-200 hover:border-gray-400 hover:shadow-md dark:hover:border-gray-400 h-full flex flex-col"
        >
          <div class="flex items-start justify-between flex-1">
            <div class="flex-1 flex flex-col">
              <Checkbox.Label
                class="block text-sm font-medium text-gray-900 dark:text-gray-100 cursor-pointer"
              >
                Enterprise
              </Checkbox.Label>
              <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                For large organizations
              </p>
              <p
                class="text-lg font-bold text-gray-900 dark:text-gray-100 mt-auto pt-2"
              >
                Custom
              </p>
            </div>
            <Checkbox.Control
              class="w-5 h-5 bg-white border-2 border-gray-300 rounded data-[state=checked]:bg-blue-500 data-[state=checked]:border-blue-500 dark:bg-gray-800 dark:border-gray-500 dark:data-[state=checked]:bg-blue-500 dark:data-[state=checked]:border-blue-500 transition-all duration-200 flex items-center justify-center"
            >
              <Checkbox.Indicator>
                <CheckIcon class="w-3.5 h-3.5 text-white" />
              </Checkbox.Indicator>
            </Checkbox.Control>
          </div>
        </div>
        <Checkbox.HiddenInput />
      </Checkbox.Root>
    </div>
  </div>

  <div>
    <h3 class="text-base font-semibold text-gray-900 dark:text-gray-100 mb-4">
      Payment methods
    </h3>
    <div class="space-y-4">
      <Checkbox.Root class="cursor-pointer group">
        <div
          class="border-2 border-gray-300 dark:border-gray-600 rounded-lg p-3 bg-white dark:bg-gray-900 shadow-xs group-data-[state=checked]:border-blue-500 group-data-[state=checked]:bg-blue-50 group-data-[state=checked]:shadow-md dark:group-data-[state=checked]:bg-blue-950 transition-all duration-200 hover:border-gray-400 hover:shadow-md dark:hover:border-gray-400"
        >
          <div class="flex items-center gap-3">
            <CreditCardIcon class="w-5 h-5 text-gray-400 dark:text-gray-500" />
            <div class="flex-1">
              <Checkbox.Label
                class="block text-sm font-medium text-gray-900 dark:text-gray-100 cursor-pointer"
              >
                Credit Card
              </Checkbox.Label>
              <p class="text-xs text-gray-500 dark:text-gray-400">
                Visa, Mastercard, American Express
              </p>
            </div>
            <Checkbox.Control
              class="w-5 h-5 bg-white border-2 border-gray-300 rounded data-[state=checked]:bg-blue-500 data-[state=checked]:border-blue-500 dark:bg-gray-800 dark:border-gray-500 dark:data-[state=checked]:bg-blue-500 dark:data-[state=checked]:border-blue-500 transition-all duration-200 flex items-center justify-center"
            >
              <Checkbox.Indicator>
                <CheckIcon class="w-3.5 h-3.5 text-white" />
              </Checkbox.Indicator>
            </Checkbox.Control>
          </div>
        </div>
        <Checkbox.HiddenInput />
      </Checkbox.Root>

      <Checkbox.Root class="cursor-pointer group">
        <div
          class="border-2 border-gray-300 dark:border-gray-600 rounded-lg p-3 bg-white dark:bg-gray-900 shadow-xs group-data-[state=checked]:border-blue-500 group-data-[state=checked]:bg-blue-50 group-data-[state=checked]:shadow-md dark:group-data-[state=checked]:bg-blue-950 transition-all duration-200 hover:border-gray-400 hover:shadow-md dark:hover:border-gray-400"
        >
          <div class="flex items-center gap-3">
            <SmartphoneIcon class="w-5 h-5 text-gray-400 dark:text-gray-500" />
            <div class="flex-1">
              <Checkbox.Label
                class="block text-sm font-medium text-gray-900 dark:text-gray-100 cursor-pointer"
              >
                Mobile Payment
              </Checkbox.Label>
              <p class="text-xs text-gray-500 dark:text-gray-400">
                Apple Pay, Google Pay, Samsung Pay
              </p>
            </div>
            <Checkbox.Control
              class="w-5 h-5 bg-white border-2 border-gray-300 rounded data-[state=checked]:bg-blue-500 data-[state=checked]:border-blue-500 dark:bg-gray-800 dark:border-gray-500 dark:data-[state=checked]:bg-blue-500 dark:data-[state=checked]:border-blue-500 transition-all duration-200 flex items-center justify-center"
            >
              <Checkbox.Indicator>
                <CheckIcon class="w-3.5 h-3.5 text-white" />
              </Checkbox.Indicator>
            </Checkbox.Control>
          </div>
        </div>
        <Checkbox.HiddenInput />
      </Checkbox.Root>
    </div>
  </div>
</div>
